var RealTimeSetting = React.createClass({
	getInitialState:function(){
		return {
			isValid:true,
			isValid_coupon:true,
			price:0,
			start_date:null,
			end_date:null,
			item_count:null,
			errInfo:null,
			isPending:false,
			remainPay:0,
			payUrl:null,
			timeout:0
		}
	},
	unitPrice:plan && plan.productions?plan.productions.realtime_update:{
		"id": null,
		"name": "",
		"price": 100,
		"price_type": "daily"
	},
	dateTypeMap:{
		'daily':'days',
		'monthly':'months',
		'yearly':'years'
	},
	componentDidMount:function(){
		var self=this,
            data=this.props.data,
            dateMode=data.dateMode,
            priceType=dateMode || this.unitPrice.price_type,
            options={
                timePicker: true,
                timePickerIncrement:1,
                endDate:moment().add(1,'d').add(10,'m').format('MM/DD/YYYY HH:mm'),
                minDate:moment().add(10,'m').format('MM/DD/YYYY HH:mm'),
                format: 'MM/DD/YYYY hh:mm:ss'
            };

        switch(dateMode){
            case 'yearly':
                options={
                    ranges: {
                        '1年': [moment().add(10,'m'), moment().add(1, 'y').add(10,'m')],
                        '2年': [moment().add(10,'m'), moment().add(2, 'y').add(10,'m')],
                        '3年': [moment().add(10,'m'), moment().add(3, 'y').add(10,'m')],
                        '4年': [moment().add(10,'m'), moment().add(4, 'y').add(10,'m')],
                        '5年': [moment().add(10,'m'), moment().add(5, 'y').add(10,'m')],
                        '6年': [moment().add(10,'m'), moment().add(6, 'y').add(10,'m')],
                        '7年': [moment().add(10,'m'), moment().add(7, 'y').add(10,'m')],
                        '8年': [moment().add(10,'m'), moment().add(8, 'y').add(10,'m')],
                        '9年': [moment().add(10,'m'), moment().add(9, 'y').add(10,'m')],
                        '10年': [moment().add(10,'m'), moment().add(10, 'y').add(10,'m')],
                    },
                    timePicker: true,
                    timePickerIncrement:1,
                    endDate: moment().add(1, 'y').add(10,'m').format('MM/DD/YYYY HH:mm'),
                    minDate:moment().add(10,'m').format('MM/DD/YYYY HH:mm'),
                    format: 'MM/DD/YYYY hh:mm:ss'
                };
                break;
        }

		$(this.refs.timePicker).daterangepicker(options).on('apply.daterangepicker',function(obj,date){
			var days=moment(date.endDate.format('YYYY-MM-DD')).diff(date.startDate.format('YYYY-MM-DD'),self.dateTypeMap[priceType]),
				time=date.startDate.format('HH:mm:ss');
			self.setState({
				isValid:true,
				price:days*self.unitPrice.price,
				start_date:date.startDate.format('YYYY-MM-DD')+' '+time,
				end_date:date.endDate.format('YYYY-MM-DD')+' '+time,
				item_count:days,
				errInfo:null
			})
		});

		this.componentDidUpdate()
	},
	timer:null,
	componentDidUpdate:function(){
		var self=this,
			timeout=this.state.timeout,
			payUrl=this.state.payUrl;

		if(payUrl && !this.timer){
			if(timeout>0){
				this.timer=setTimeout(function(){
					self.timer=null;
					self.setState({
						timeout:timeout-1
					})
				},1000)
			}else{
				location.href=payUrl
			}
		}
	},
	submit:function(){
		var self=this,
			data=this.props.data,
			callback=this.props.callback,
			start_date=this.state.start_date,
			end_date=this.state.end_date,
			item_count=this.state.item_count,
			coupon=this.refs.promo.value,
			validDate=(start_date && end_date && item_count>0);

		if( validDate ){
			this.setState({
				isPending:true
			});

			if(callback){callback({
				wall_id:data.id,
				item:this.unitPrice.id,
				start_date:start_date,
				end_date:end_date,
				item_count:item_count,
				coupon:coupon
			},function(isSuccess,detail){
				if(isSuccess){
					if(detail.status=='paying'){
						self.setState({
							remainPay:detail.amount,
							payUrl:detail.alipay_url,
							timeout:3,
							isPending:false
						})
					}else{
						self.setState({
							isPending:false
						},function(){
							self.close()
						})
					}
				}else{
					self.setState({
						errInfo:detail,
						isPending:false
					})
				}
			})}
			
		}else{
			this.setState({
				isValid:validDate
			})
		}
	},
	changeCoupon:function(){
		/*this.setState({
			isValid_coupon:true
		})*/
	},
	close:function(){
		var callback=this.props.cancelCallback;

		if(!this.state.isPending){
			ReactDOM.unmountComponentAtNode(document.getElementById('modal'));
			if(callback){callback()}
		}
	},
	render:function(){
		var isValid=this.state.isValid,
			isValid_coupon=this.state.isValid_coupon,
			start_date=this.state.start_date,
			end_date=this.state.end_date,
			isPending=this.state.isPending,
			price=this.state.price,
			remainPay=this.state.remainPay,
			payUrl=this.state.payUrl,
			discounted=price-remainPay,
			timeout=this.state.timeout;

		return (
			<div className="modal fade in plan-picker" style={{display:'block'}}>
	            <div className="modal-dialog">
	                {remainPay && payUrl?<div className="modal-content">
	                	<div className="modal-header">
	                        <h4 className="modal-title">{i18next.t('open_real_time.effortting')}</h4>
	                    </div>
	                    <div className="modal-body fix-body text-center">
	                    	<h4 style={{marginBottom:'30px'}}>
	                    		<i className="glyphicon glyphicon-credit-card wall-icon"></i>
	                    		<span>{(discounted>0? i18next.t('open_real_time.discount') +discounted+i18next.t('open_real_time.rmb')+',':'')}</span>{i18next.t('open_real_time.effort_prompt')} <strong className="text-red">{remainPay}</strong>{i18next.t('open_real_time.rmb')}
	                    	</h4>
	                    	<p style={{fontSize:'16px'}}><strong className="text-red">{timeout} </strong> {i18next.t('open_real_time.goto')}</p>
	                    </div>
	                    <div className="modal-footer">
	                    	<a href={payUrl} className="btn btn-warning" target="_self">{i18next.t('open_real_time.jump')}</a>
	                   	</div>
	            	</div>:<div className="modal-content">
	                    <div className="modal-header">
	                    	{!isPending?<button type="button" className="close" onClick={this.close}>
								<span>&times;</span>
								<span className="sr-only">Close</span>
							</button>:''}
	                        <h4 className="modal-title">{this.props.title}</h4>
	                    </div>
	                    <div className="modal-body fix-body">
							<div className={isValid?"form-group":"form-group has-error"}>
								<label>{i18next.t('open_real_time.selecttime')}</label>
								<div className="col-md-12" style={{margin:'10px 0 20px 0'}}>
									<div className="input-group">
										<div className="input-group-addon">
											<i className="fa fa-clock-o"></i>
										</div>
										<input type="text" className="form-control pull-right" ref="timePicker" value={start_date&&end_date?start_date+' - '+end_date:''} />
									</div>
									{!isValid?<span className="help-block">{i18next.t('open_real_time.time')}</span>:''}
								</div>
							</div>
							<div className="clearfix"></div>
							<div>
								<div className="col-md-7">
									<div className="well well-sm no-shadow" style={{height:'150px'}}>
										<h5>{i18next.t('open_real_time.effort')}<strong style={{fontSize:'18px'}} className="pull-right">{price+' ￥'}</strong></h5>
										<div className="clearfix"></div>
										<div className={isValid_coupon?"input-group":"input-group has-error"} style={{marginTop:'25px'}}>
											<input type="text" className="form-control" ref="promo" onChange={this.changeCoupon} />
											<span className="input-group-addon"><i className="fa fa-key"></i> {i18next.t('open_real_time.money')}</span>
										</div>
									</div>
								</div>
								<div className="col-md-5">
									<div className="well well-sm no-shadow" style={{height:'150px'}}>
										<h5>{i18next.t('open_real_time.question')}</h5>
										<div className="box-body">
											<p><i className="fa fa-envelope"></i> hi@parllay.cn</p>
											<p><i className="fa fa-phone"></i> 400-101-2035</p>
										</div>
									</div>
								</div>
							</div>
							{this.state.errInfo?<div className="form-group has-error">
								<div className="col-md-12"><span className="help-block" style={{textAlign:'right'}}>{this.state.errInfo}</span></div>
							</div>:''}
	                    </div>
	                    <div className="modal-footer">
	                        {!isPending?<button type="button" className="btn btn-default" onClick={this.close}>{i18next.t('open_real_time.cancel')}</button>:''}
	                        {isPending?<button type="button" className="btn btn-default">{i18next.t('open_real_time.opening')}</button>:<button type="button" className="btn btn-primary" onClick={this.submit}>{i18next.t('open_real_time.open')}</button>}
	                    </div>
	                </div>}
	            </div>
	        </div>
		)
	}
});